<template>
  <el-table
    class="car-list-container"
    border fit highlight-current-row
    :data="orderList">
    <el-table-column v-for="(col, colIndex) in tableCols"
                     :type="col.type"
                     :index="col.index"
                     :key="col.prop"
                     :prop="col.prop"
                     :label="col.label"
                     :width="col.width">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="view(scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="repayment(scope.row)" type="text" size="small" style="color: red">还款</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    export default {
        name: 'OrderList',
        data() {
            return {
              tableCols:[
                // 序号
                {type:'index', index:1},
                {prop:'orderNo', label:'订单编号'},
                {prop:'amount', label:'贷款金额'},
                {prop:'status', label:'订单状态'},
                {prop:'productType', label:'产品类型'},
                // 贷款日期
                {prop:'createDate', label:'贷款日期'},
                // 贷款金额
                // 还款时间
                {prop:'paybackTime', label:'还款时间'},
                // 利息
                {prop:'rate', label:'利息'},
                {prop:'paybackAmount', label:'到期应还'},
                // 操作
              ]
        }
      },
      computed:{
        orderList(){
          return this.$store.state.orderList;
        }
      },
      methods:{
        view(row){
          this.$emit('goView',row)
        },
        repayment(row){
            this.$emit('goRepayment', row)
        }
      }
    }
</script>

<style lang="stylus" scoped>
  .car-list-container
    margin-top: 15px
</style>
